<template>
	<view class="cardBox">
		<view class="cardBox-title flex-start-center f-32">
			<text class="iconfont icon-money-credit-card-fill m-r-10"></text>
			<text>共计</text>
			<text class="m-x-16">{{ data?.CardCustomerCnt || 0 }}</text>
			<text>人开卡</text>
		</view>
		<view class="cardBox-cell">
			<view class="cardBox-item">
				<view class="countTitle">充值金额</view>
				<view class="countNumber">
					{{ `${data?.TotalChargeAmt || 0}` }}
				</view>
			</view>
			<view class="cardBox-item">
				<view class="countTitle">充值笔数</view>
				<view class="countNumber">
					{{ `${data?.TotalChargeCnt || 0}` }}
				</view>
			</view>
			<view class="cardBox-item">
				<view class="countTitle">扣款金额</view>
				<view class="countNumber">
					{{ `${data?.TotalCardDeAmt || 0}` }}
				</view>
			</view>
			<view class="cardBox-item">
				<view class="countTitle">扣款笔数</view>
				<view class="countNumber">
					{{ `${data?.TotalCardDeCnt || 0}` }}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="uts" setup>
//公共状态
import { useVue  } from '@/utils/useVue.uts'
const { reactive, ref,app,Token,onMounted,watch,http,goToPage } = useVue()
interface Props {
	data ?: any,//数据
}
const props = withDefaults(defineProps<Props>(), {

})
// 表单数据
const formData:any = reactive({

})
//搜索
</script>

<style scoped lang="scss">
.cardBox {
	.cardBox-cell {
		display: flex;
		flex-wrap: wrap;
		.cardBox-item {
			width: calc((100% + 16rpx) / 2 - 16rpx);
			background: #fff;
			margin-top: 16rpx;
			margin-right: 16rpx;
			color: #000;
			border-radius: 8rpx;
			padding: 16rpx;
			box-sizing: border-box;
			box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
			&:nth-child(2n) {
				margin-right: 0;
			}
			.countTitle {
				color: rgba(0, 0, 0, 0.6);
			}
		}
	}
}
</style>
